<template>
  <div class="outdoor-VF">
    <header class="header">
      <span class="title">室外三维视频融合</span>
    </header>
    <div v-if="!destroy" id="cesiumContainer" />
    <div class="home_ui">
      <handel-block :video-data="videoData" @flyToHome="flyToHome" @show="show" @hide="hide"
        @flyToVModelById="flyToVModelById" @flyToModel="flyToModel" />
    </div>
  </div>
</template>

<script>
  import {
    getScene,
    getEntities,
    getEntity,
    getProviders,
    getModels
  } from '@/api/vf'

  import HandelBlock from "./components/HandleBlock.vue"
  export default {
    name: 'outdoor-VF',
    components: {
      HandelBlock
    },
    data() {
      return {
        scene: null,
        ctx: '',
        dialog: {
          isShow: false
        },
        videoData: [],
        destroy: false
      }
    },
    created() {
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
    },
    methods: {
      init: async function() {
        const _this = this
        let isOk = false
        let scene
        await getScene({
          sceneId: '4a34dde8a430454ab919b5dc9f7ba46a'
        }).then(rsp => {
          if (rsp.code === 200) {
            isOk = true
            scene = rsp.data
            _this.scene = scene
          }
        }).catch(() => {}).then(() => {})
        if(!isOk){
          return
        }
        createGlobe('cesiumContainer', scene)
        await getProviders({
          sceneId: '4a34dde8a430454ab919b5dc9f7ba46a',
          layerId:'6a2b82b20c544f0d940e2143a27beb21'
        }).then(res =>{
          if(200===res.code){
            let list = res.data
            globe.addProviders(list);
          }
        }).catch(() =>{})
        await getModels({
          sceneId: '4a34dde8a430454ab919b5dc9f7ba46a',
          layerId:'03af127db1fd4ed08214eab516db56f9'
        }).then(res =>{
          if(200===res.code){
            let list = res.data
            globe.addModels(list);
          }
        }).catch(() =>{})
        await getEntities('240028d4b2a749e7951daf732d401fd1').then(rsp => {
          console.log("视频",rsp)
          if (rsp.code === 200) {
            _this.videoData = rsp.data.entities
          }
        }).catch(() => {})
      },
      flyToHome() {
        /* 飞行到主视角 */
        const _this = this
        globe.flyToHome(_this.scene)
      },
      flyToVModelById: function(id) {
        /* 飞行到融合点位 */
        // console.log("行点击", id)
        globe.flyToVModelById(id)
      },
      flyToModel: function(id) {
        globe.flyToModel(id)
      },
      show(id) {
        /* 显示融合点位 */
        // const _this = this
        console.log("显示",id)
        getEntity(id).then(rsp => {
          console.log(rsp)
          if (rsp.code === 200) {
            const model = rsp.data
            globe.addVModel(model,"")
            console.log("id",model.id)
            globe.flyToVModelById(model.id)
          }
        }).catch(() => {}).then(() => {})
      },
      hide(id) {
        /* 隐藏融合点位 */
        const _this = this
        // console.log("隐藏",id)
        getEntity(id).then(rsp => {
          if (rsp.code === 200) {
            const model = rsp.data
            globe.removeVModel(model,"")
          }
        }).catch(() => {}).then(() => {})
      },
    }
  }
</script>
<style lang="scss" scoped>
  .outdoor-VF {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;

    #cesiumContainer {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
    }

    .header {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 3.5rem;
      height: 7.5rem;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      background-image: url(../../assets/img/title.png);
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      z-index: 9;
      width: 100%;

      .title {
        position: relative;
        top: 1rem
      }
    }

    .home_ui {
      pointer-events: none;
      position: absolute;
      z-index: 9;
      overflow: hidden;
      flex-direction: column;
      display: flex;
      top: 15rem;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
</style>
